<!-- 
  Mixin 混入

    概念：
        一种逻辑复用的东西，本质上就是一个包含有组件相同选项配置的一个对象


    使用：
      1. 定义好一个 混入对象
      2. 通过 mixins 选项 注册混入对象
          mixins: [minxin1, mixin2]

    合并策略

      概念：当一个混入对象中写了，当前组件也写了的东西，听谁的的问题

      1. 替换型
        替换型合并有props、methods、inject、computed
      2. 合并型
        data，同名的数据，听组件的
      3. 队列型
        全部生命周期和watch
      4. 叠加型
        component、directives、filters

    Vue3 不再推荐使用 混入，而是使用组合式函数（hook）
      1. 不清晰的数据来源
      2. 命名空间冲突
      3. 隐式的跨 mixin 交流


 -->

<template>
  <div>
    <h1>Mixin</h1>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <p>Sex: {{ sex }}</p>
    <p>agePlus: {{ agePlus }}</p>
    <button @click="addAge">ADD</button>
    <button @click="jianAge">JIAN</button>
  </div>
</template>

<script>
import zs from './mixins/zs'
import ls from './mixins/ls'

export default {
  mixins: [zs, ls],

  data() {
    return {
      // age: 100,
      sex: '男'
    }
  },

  methods: {
    addAge() {
      console.log('App addAge')
      this.age += 100
    }
  },

  created() {
    console.log('App created')
  }
}
</script>
